<template>
  <div class="detail">
    <!-- 搜索框 -->
    <div class="search-bar">
      <el-form :model="searchForm" inline label-width="80px" size="mini">
        <el-form-item prop="name" label="姓名">
          <el-input
            v-model="searchForm.name"
            class="item-len"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="signResult" label="考勤状态">
          <el-select
            v-model="searchForm.signResult"
            clearable
            class="item-len"
            @change="pageInit"
          >
            <el-option
              v-for="(v, k) in signResultOptions"
              :key="'s' + k"
              :label="v.label"
              :value="v.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="idCard" label="身份证">
          <el-input
            v-model="searchForm.idCard"
            class="item-len"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="groupName" label="组别">
          <el-select
            v-model="searchForm.groupName"
            class="item-len"
            clearable
            @change="pageInit"
          >
            <el-option
              v-for="(v, k) in groups"
              :key="k"
              :value="v"
              :label="v"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            @click="pageInit"
            type="primary"
            icon="el-icon-search"
            >搜索</el-button
          >
          <el-button size="mini" icon="el-icon-refresh" @click="reset"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-row type="flex" align="middle">
        <el-col :span="6" :push="1">
          <el-button
            size="small"
            @click="editResult"
            :disabled="query.status == 1"
            >考勤调整</el-button
          >
          <el-button size="small" @click="callChangeList">变动记录</el-button>
          <el-button size="small" @click="cardDetail">明细</el-button>
        </el-col>
        <el-col :span="18">
          <span style="font-size:14px;color:#A8A8A8">共{{ total }}条记录</span>
        </el-col>
      </el-row>
    </div>
    <!-- 表格 -->
    <div class="table">
      <el-table
        :data="tableData"
        v-loading="loading"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        height="100%"
        :row-class-name="rowClass"
      >
        <!-- <el-table-column prop="id" v-if="false"></el-table-column> -->
        <el-table-column type="selection"></el-table-column>
        <el-table-column
          prop="areaName"
          label="区域"
          width="150"
        ></el-table-column>
        <el-table-column prop="groupName" label="组别"></el-table-column>
        <el-table-column prop="staffName" label="姓名"></el-table-column>
        <el-table-column
          prop="idCard"
          label="身份证"
          min-width="180"
        ></el-table-column>
        <el-table-column
          prop="stationName"
          label="岗位"
          width="150"
        ></el-table-column>
        <!-- <el-table-column prop="zj" label="职级"></el-table-column> -->
        <el-table-column prop="daySignResult" width="80px" label="白班出勤">
          <template slot-scope="scope">
            {{ scope.row.daySignResult == 1 ? "出勤" : "未出勤" }}
          </template>
        </el-table-column>
        <el-table-column prop="nightSignResult" width="80px" label="夜班出勤">
          <template slot-scope="scope">
            {{ scope.row.nightSignResult == 1 ? "出勤" : "未出勤" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="morningResultName"
          width="80px"
          label="早上上班"
        ></el-table-column>
        <el-table-column
          prop="morningTime"
          label="打卡时间"
          min-width="160"
        ></el-table-column>
        <el-table-column
          prop="morningSignResult"
          v-if="false"
        ></el-table-column>
        <el-table-column
          prop="afternoonResultName"
          width="80px"
          label="中午上班"
        ></el-table-column>
        <el-table-column
          prop="afternoonTime"
          label="打卡时间"
          min-width="160"
        ></el-table-column>
        <el-table-column
          prop="afternoonSignResult"
          v-if="false"
        ></el-table-column>
        <el-table-column
          prop="nightResultName"
          width="80px"
          label="晚上上班"
        ></el-table-column>
        <el-table-column
          prop="nightTime"
          label="打卡时间"
          min-width="160"
        ></el-table-column>
        <el-table-column prop="nightSignResult" v-if="false"></el-table-column>
        <el-table-column
          prop="downWorkResultName"
          width="80px"
          label="下班"
        ></el-table-column>
        <el-table-column
          prop="downWorkTime"
          label="打卡时间"
          min-width="160"
        ></el-table-column>
        <el-table-column
          prop="downWorkSignResult"
          v-if="false"
        ></el-table-column>

        <el-table-column prop="absent" label="缺卡次数"></el-table-column>
        <el-table-column prop="late" label="普通迟到"></el-table-column>
        <el-table-column
          prop="lateOfNormal"
          width="80px"
          label="一般迟到"
        ></el-table-column>
        <el-table-column
          prop="lateOfSeriously"
          width="80px"
          label="严重迟到"
        ></el-table-column>
        <!-- <el-table-column prop="absenteeism" label="早退次数"></el-table-column> -->
        <el-table-column prop="absenteeism" label="旷工次数"></el-table-column>
      </el-table>
    </div>
    <!-- 考勤变更面板 -->
    <edit-dialog
      :dialogVisible="dialogVisible"
      :loading="loading"
      @cancel="dialogVisible = false"
      @confirm="editConfirm"
    ></edit-dialog>
    <!-- 变更记录面板 -->
    <change-list
      :dialogVisible="changeListVisible"
      :tableData="historyDatas"
      @cancel="changeListVisible = false"
      @confirm="changeListConfirm"
    ></change-list>
    <!-- 明细面板 -->
    <card-detail
      :dialogVisible="cardDetailVisible"
      :tableData="cardTableData"
      @cancel="cardDetailVisible = false"
      @confirm="cardDetailConfirm"
    ></card-detail>
  </div>
</template>

<script>
//component
import EditDialog from "./components/EditDialog.vue";
import ChangeList from "./components/ChangeList.vue";
import CardDetail from "./components/CardDetails.vue";
// api
import {
  detailStatistics,
  updateDetails,
  histories,
  cardDetails,
  monthOptions
} from "@/api/job/attendance/v2/attendanceApi";
// js
import { signResultOptions } from "@/assets/js/const.js";
export default {
  components: {
    EditDialog,
    ChangeList,
    CardDetail
  },
  created() {
    this.query = this.$route.query;
    delete this.query["signResult"];
    this.optionInit();

    this.pageInit();
  },
  data() {
    return {
      changeListVisible: false,
      dialogVisible: false,
      cardDetailVisible: false,
      loading: false,
      groups: [],
      multipleSelection: [], // 多选框
      signResultOptions: signResultOptions,
      total: 0,
      query: undefined,
      searchForm: {},
      tableData: [],
      historyDatas: [],
      cardTableData: []
    };
  },
  methods: {
    reset() {
      this.searchForm = {};
      this.pageInit();
    },
    optionInit() {
      const params = {
        month: this.query.date.substr(0, this.query.date.lastIndexOf("-")),
        deptId: this.query.deptId
      };
      monthOptions(params).then(res => {
        this.groups = res.data.groups;
      });
    },
    rowClass({ row }) {
      if (row.updateFlag > 0) {
        return "success-row";
      }
    },
    pageInit() {
      this.loading = true;
      const params = { ...this.searchForm, ...this.query };
      detailStatistics(params)
        .then(res => {
          this.total = res.total;
          this.tableData = res.rows;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 考勤调整
    editResult() {
      if (this.multipleSelection.length == 0) {
        this.$message.error("至少选择一条数据");
        return;
      }

      this.dialogVisible = true;
    },
    // 调整确认
    editConfirm(data) {
      this.loading = true;
      const datas = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        for (let k of Object.keys(data)) {
          let signType = 21;
          if (k == "morning") {
            signType = 11;
          } else if (k == "afternoon") {
            signType = 12;
          } else if (k == "night") {
            signType = 13;
          }
          const tmp = {
            ...this.query,
            signType: signType,
            signResult: data[k],
            idCard: this.multipleSelection[i].idCard
          };
          datas.push(tmp);
        }
      }
      updateDetails(datas).then(() => {
        this.dialogVisible = false;
        this.pageInit();
        this.loading = false;
      });
    },
    // 变更记录
    callChangeList() {
      if (this.multipleSelection.length == 0) {
        this.$message.error("至少选择一条数据");
        return;
      }
      const idCards = this.multipleSelection.map(item => {
        return item.idCard;
      });
      const params = { date: this.query.date, idCards };
      histories(params).then(res => {
        this.historyDatas = res.data;
        this.changeListVisible = true;
      });
    },
    // 打卡明细
    cardDetail() {
      if (this.multipleSelection.length == 0) {
        this.$message.error("至少选择一条数据");
        return;
      }
      const idCards = this.multipleSelection.map(item => {
        return item.idCard;
      });
      const params = { date: this.query.date, idCards };
      cardDetails(params).then(res => {
        this.cardTableData = res.data;
        this.cardDetailVisible = true;
      });
    },
    changeListConfirm() {},
    cardDetailConfirm() {}
  }
};
</script>

<style lang="scss">
.detail {
  height: 90vh;
  padding: 10px;

  .search-bar {
    height: 15%;
  }

  .item-len {
    width: 150px;
  }

  .table {
    height: 80%;
    overflow-y: scroll;
  }
}

.el-table .success-row {
  background-color: antiquewhite;
}
</style>
